import React, { useState } from 'react';
import type { StockFormData } from '../types/stock';

interface StockFormProps {
  onSubmit: (data: StockFormData) => void;
  initialData?: StockFormData;
}

const StockForm: React.FC<StockFormProps> = ({ onSubmit, initialData }) => {
  const [formData, setFormData] = useState<StockFormData>(
    initialData || {
      date: new Date().toISOString().split('T')[0],
      stockName: '',
      shares: 0,
      buyPrice: 0,
      sellTarget: 0,
      status: 'holding'
    }
  );

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (formData.stockName && formData.shares > 0 && formData.buyPrice > 0) {
      onSubmit(formData);
      // 重置表单
      setFormData({
        date: new Date().toISOString().split('T')[0],
        stockName: '',
        shares: 0,
        buyPrice: 0,
        sellTarget: 0,
        status: 'holding'
      });
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value, type } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'number' ? parseFloat(value) || 0 : value
    }));
  };

  return (
    <form onSubmit={handleSubmit} className="stock-form">
      <div className="form-group">
        <label htmlFor="date" className="text-sm font-medium text-gray-700">日期:</label>
        <input
          type="date"
          id="date"
          name="date"
          value={formData.date}
          onChange={handleChange}
          className="input"
          required
        />
      </div>

      <div className="form-group">
        <label htmlFor="stockName" className="text-sm font-medium text-gray-700">股票名称:</label>
        <input
          type="text"
          id="stockName"
          name="stockName"
          value={formData.stockName}
          onChange={handleChange}
          placeholder="请输入股票名称"
          className="input"
          required
        />
      </div>

      <div className="form-group">
        <label htmlFor="shares" className="text-sm font-medium text-gray-700">买入股数:</label>
        <input
          type="number"
          id="shares"
          name="shares"
          value={formData.shares}
          onChange={handleChange}
          min="1"
          className="input"
          required
        />
      </div>

      <div className="form-group">
        <label htmlFor="buyPrice" className="text-sm font-medium text-gray-700">买入价格:</label>
        <input
          type="number"
          id="buyPrice"
          name="buyPrice"
          value={formData.buyPrice}
          onChange={handleChange}
          step="0.01"
          min="0.01"
          className="input"
          required
        />
      </div>

      <div className="form-group">
        <label htmlFor="sellTarget" className="text-sm font-medium text-gray-700">卖出目标:</label>
        <input
          type="number"
          id="sellTarget"
          name="sellTarget"
          value={formData.sellTarget}
          onChange={handleChange}
          step="0.01"
          min="0.01"
          className="input"
        />
      </div>

      <div className="form-group">
        <label htmlFor="status" className="text-sm font-medium text-gray-700">状态:</label>
        <select
          id="status"
          name="status"
          value={formData.status}
          onChange={handleChange}
          className="input"
        >
          <option value="holding">持有中</option>
          <option value="sold">已卖出</option>
          <option value="target_reached">达到目标</option>
        </select>
      </div>

      <button type="submit" className="btn-primary w-full">
        <i className="i-mdi-plus mr-2"></i>
        添加记录
      </button>
    </form>
  );
};

export default StockForm;